<template>
	<view class="container">
		<view class="row-a1">
			<view class="title">
				选择您的身份以获得个性化体验
			</view>
			<view class="list">
				<view class="item" @click="setInfo(1)">
					<view class="border">
						<view class="icon">
							<u-icon name="account" size="30" color="#5ac725">

							</u-icon>
						</view>
						<view class="text">
							学生查看学习资料和作业
						</view>
					</view>
				</view>
				<view class="item" @click="setInfo(2)">
					<view class="border">
						<view class="icon">
							<u-icon name="account" size="30" color="#3c9cff">

							</u-icon>
						</view>
						<view class="text">
							老师管理课程和学生信息
						</view>
					</view>
				</view>
				<view class="item" @click="setInfo(3)">
					<view class="border">
						<view class="icon">
							<u-icon name="setting" size="30" color="#f9ae3d">

							</u-icon>
						</view>
						<view class="text">
							管理员系统管理和用户维护
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		usersEdit,
		usersById
	} from "@/api/users/index.js"
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {

			}
		},
		components: {

		},
		computed: {
			...mapState(['$userInfo']),
		},
		methods: {
			...mapMutations(['setUserInfoRole', 'setUserInfo', 'layout']),
			setInfo(role) {
				let that = this;
				if (this.$userInfo.role != role) {
					let param = {
						_id: this.$userInfo._id,
						role: role
					}
					usersEdit(param).then(res => {
						usersById({
							params: {
								_id: that.$userInfo._id
							}
						}).then(res => {
							if (res.code == 200) {
								uni.setStorageSync("userInfo", res.data);
								that.setUserInfo(res.data);
								uni.$u.route({
									url: "/pages/index/index",
									type: "reLaunch"
								});
							} else {
								that.layout();
								uni.$u.route({
									url: "/pages/login/index"
								});
							}
						})
					})
				} else {
					uni.$u.toast("无法重复选择身份");
				}
			}
		},
		onShow() {

		},
		onLoad() {},
		onLaunch() {

		}
	}
</script>

<style lang="scss">
	.container {
		.row-a1 {
			.title {
				text-align: center;
				padding: 25px 0;
				font-size: 28rpx;
			}

			.list {
				display: flex;
				flex-direction: column;
				align-items: center;

				.item {
					width: 80%;
					background-color: #fff;
					margin-bottom: 10px;
					padding: 10px;
					border-radius: 8px;

					.border {
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						padding: 10px;
						border-radius: 8px;
						border: solid 1px #f5f5f5;
						position: relative;

						.icon {
							margin-right: 10px;
						}

						.text {
							font-size: 28rpx;
						}

						&::after {
							position: absolute;
							top: 0;
							left: 0;
							width: 0;
							height: 100%;
							content: "";
							background: linear-gradient(to right, rgba(255, 0, 0, 0.1), rgba(0, 255, 0, 0.1));
							transition: width 0.3s ease;
						}

						&:hover {
							&::after {
								width: 100%;
							}
						}
					}
				}
			}
		}
	}
</style>